<template>
	<view class="uni-padding-wrap uni-common-mt" style="background-color: white;">

		<view class="uni-flex uni-row newsitem" v-for="(item,key) in newsData" :key="key">

			<view>
				<image :src="item.cover" class="img1"></image>
			</view>

			<view class="uni-flex uni-column view1">
				<view class="titleText">
					{{item.title.substring(0,30)}}
				</view>

				<view class="uni-flex uni-row">
					<view class="text" style="flex: 1.5;">{{item.author_name}}</view>
					<view class="text" style="flex: 1;">评论数 {{item.comments_count}}</view>
				</view>
			</view>

		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				requestParams: {columnId: 0,minId: 0,pageSize: 10,column: 'id,post_id,title,author_name,cover,published_at,comments_count'},
				newsData: []
			}
		},
		onLoad() {
			this.getData();
		},
		onPullDownRefresh() {
			this.getData(1);
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.getData();
		},
		methods: {
			getData(fx=0) {
				//获取网络api接口数据：uni.request
				uni.request({
					url: "https://unidemo.dcloud.net.cn/api/news",
					data: this.requestParams,
					success: res => {
						//调用远程网络接口数据成功获取到的数据后，进行处理
						this.newsData = fx == 1? [...res.data,...this.newsData] :[...this.newsData,...res.data]
						this.requestParams.minId = res.data[res.data.length - 1].id;
					}
				})
			}
		}
	}
</script>

<style>
	.titleText {
		margin: 5rpx 10rpx;
		line-height: 60rpx;
		color: #777;
		font-size: 26rpx;
		height: 120rpx;
		text-align: left;
		padding-left: 20rpx;
		padding-top: 10rpx;
	}
	.view1{
		 flex: 1;
		 justify-content: flex-start;
	}
	.text {
		margin: 5rpx 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #777;
		font-size: 26rpx;
	}


	.img1 {
		width: 255rpx;
		height: 225rpx;
	}

	.newsitem {
		margin: 25rpx 0rpx;
		padding: 30rpx 10rpx;
		border-bottom: #d8d8d8 1px solid;
	}
</style>